"use client";
import { motion, useMotionValueEvent, useScroll } from "motion/react";
import { FC, useEffect, useRef, useState } from "react";
import lodash from "lodash";
import { Globe, Mail, Menu, Search, X } from "lucide-react";
import clsx from "clsx";
import FullNav from "./fullNav";
const GlobalHeader: FC = ({}) => {
  const headerRef = useRef<HTMLHeadingElement>(null);
  const logoRef = useRef<HTMLImageElement>(null);
  const [iconSize, setSize] = useState<number>(30);
  const [isScrolled, setIsScrolled] = useState<boolean>(false);
  const [isNavOpen, setIsNavOpen] = useState<boolean>(false);
  const { scrollY } = useScroll();

  useMotionValueEvent(
    scrollY,
    "change",
    lodash.throttle((latest) => {
      if (latest > 100) {
        setIsScrolled(true);
        setSize(20);
        // logoRef.current?.classList.add("!opacity-0");
      } else {
        setIsScrolled(false);
        setSize(30);
        // logoRef.current?.classList.remove("!opacity-0");
      }
    }, 100)
  );
  useEffect(() => {
    if (isNavOpen) {
      document.body.classList.add("overflow-hidden");
    } else {
      document.body.classList.remove("overflow-hidden");
    }
  }, [isNavOpen]);
  const headerClass = clsx(
    "sticky top-0 left-0 right-0 z-50 md:h-30 h-20 flex items-center justify-between md:px-15 transition-all px-3",
    {
      "bg-white !h-20 mb-10 !px-10 ": isScrolled,
      "bg-white": isNavOpen,
      "bg-gradient-to-t to-black/50 from-transparent":
        !isScrolled && !isNavOpen,
    }
  );

  const logoContainerClass = clsx(
    "transition-all  relative before:w-[140px] before:z-9 before:h-[31px] before:absolute before:top-0 before:left-0 before:block before:bg-[url('https://www.setsunan.ac.jp/common/css/img/logo.svg')] before:bg-contain before:bg-no-repeat before:bg-center",
    {
      "before:opacity-100": isNavOpen,
      "before:opacity-0": !isScrolled || isNavOpen,
    }
  );
  const logoClass = clsx("transition-all opacity-100 ", {
    "!opacity-0": isScrolled || isNavOpen,
  });
  const menuItemClass = clsx(
    "transition-all flex-col items-center cursor-pointer hidden md:flex",
    {
      "text-gray-200 hover:text-gray-50 mr-8 ml-8": !isScrolled,
      "text-gray-600 hover:text-orange-500  mr-4 ml-4 text-black":
        isScrolled || isNavOpen,
    }
  );
  const menuItemTextClass = clsx("text-sm mt-2 font-bold", {
    "text-[12px]": isScrolled,
  });
  const examInfoClass = clsx(
    "h-10 bg-gray-800 text-white rounded-3xl font-bold leading-10 px-4 cursor-pointer hover:bg-orange-500 hover:text-white transition-bg-color duration-500",
    { "mr-5 text-sm": isScrolled, "mr-10 text-[14px] px-5": !isScrolled }
  );
  return (
    <>
      <motion.header
        ref={headerRef}
        className={headerClass}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.1 }}
      >
        {/* <div className={logoContainerClass}>Mart-C</div> */}
        <h1 className={logoContainerClass}>
          <img
            ref={logoRef}
            src="https://www.setsunan.ac.jp/common/img/logo_white.svg"
            alt={"logo"}
            width={140}
            height={31}
            className={logoClass}
          />
        </h1>
        <div className="flex items-center group ">
          <div className={examInfoClass}>入学に関するお問い合わせ</div>
          <div className={menuItemClass}>
            <Globe size={iconSize} />
            <p className={menuItemTextClass}>言語</p>
          </div>
          <div className={menuItemClass}>
            <Search size={iconSize} />
            <p className={menuItemTextClass}>検索</p>
          </div>
          <div className={menuItemClass}>
            <Mail size={iconSize} />
            <p className={menuItemTextClass}>メールシステム</p>
          </div>
          <div
            className={`${menuItemClass} relative z-[51]`}
            onClick={() => setIsNavOpen(!isNavOpen)}
          >
            {isNavOpen ? <X size={iconSize} /> : <Menu size={iconSize} />}
            <p className={menuItemTextClass}>メニュー</p>
          </div>
        </div>
      </motion.header>
      {isNavOpen && <FullNav isScrolled={isScrolled} />}
    </>
  );
};

export default GlobalHeader;
